<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue开关组件</title>
    <script src="https://unpkg.com/vue@next"></script>
    <style>
      .container {
        position: relative;
        border-width: 2px;
        border-style: solid;
        width: 55px;
        height: 30px;
        border-radius: 30px;
      }
      .btn {
        position: absolute;
        width: 30px;
        height: 30px;
        border-radius: 50%;
      }
    </style>
  </head>
  <!-- 
    1、做出DOM结构,了解哪些是变数
    2、考虑变数如何绑定变量？
    3、事件如何绑定？
    4、如何包装？
   -->
  <body>
    <div id="Application">
      <my-switch></my-switch>
    </div>
    <script>
      const App = Vue.createApp({});

      // Step 1
      const switchComponent = {
        data() {
          return {
            borderColor: "red",
            backgroundColor: "green",
            btnLeft: 0,
            btnBackGroundColor: "red",
            isOpen: false,
          };
        },
        methods: {
          click() {
            this.isOpen = !this.isOpen;
            this.btnLeft = this.isOpen ? "25" : "0";
          },
        },
        template: `
        <div class="container" :style="{borderColor, backgroundColor}" @click="click">
          <div class="btn" :style="{left:btnLeft +'px', backgroundColor: btnBackGroundColor}"></div>
        </div>
        `,
      };
      App.component("my-switch", switchComponent);

      App.mount("#Application");
    </script>
  </body>
</html>
